<template>
  <div>

    <p>
      <a href="https://github.com/riophae/vue-treeselect">TreeSelect开源组件</a>
      对树形结构的json数据做下拉框多选
    </p>

    <TreeSelect v-model="value" :multiple="true" :options="options"/>
  </div>
</template>

<script>
// import the component
import TreeSelect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: "TestTree",
  components: {
    TreeSelect
  },
  data() {
    return {
      // define the default value
      value: null,
      // define options
      options: [
        {
          id: 'a',
          label: 'a',
          children: [
            {
              id: 'aa',
              label: 'aa',
            }, {
              id: 'ab',
              label: 'ab',
            }
          ],
        },
        {
          id: 'b',
          label: 'b',
        },
        {
          id: 'c',
          label: 'c',
        }
      ],
    }
  },
}
</script>

<style scoped>

</style>
